<template>
    <div class="box">
        <div class="title">{{$t('payrec')}} | {{$t('detls')}}</div>
        <el-button type="primary" icon="el-icon-d-arrow-left" :circle="true" @click="goAway" v-preventReClick></el-button>
        <div class="detBox">
            <el-row>
                <el-col :span="4">
                    <div class="grid-content bg-purple">
                        <div class="bhead">{{$t('trstid')}}</div>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="grid-content bg-purple-light">
                        <div class="bbody">{{detForm.transId}}</div>
                    </div>
                </el-col>
                <el-col :span="4">
                    <div class="grid-content bg-purple">
                        <div class="bhead">{{$t('trstyp')}}</div>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="grid-content bg-purple-light">
                        <div class="bbody">{{detForm.transType}}</div>
                    </div>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="4">
                    <div class="grid-content bg-purple">
                        <div class="bhead">{{$t('paymentpro')}}</div>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="grid-content bg-purple-light">
                        <div class="bbody">{{detForm.productCode}}</div>
                    </div>
                </el-col>
                <el-col :span="4">
                    <div class="grid-content bg-purple">
                        <div class="bhead">{{$t('paymenttyp')}}</div>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="grid-content bg-purple-light">
                        <div class="bbody">{{detForm.payType}}</div>
                    </div>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="4">
                    <div class="grid-content bg-purple">
                        <div class="bhead">{{$t('paymentime')}}</div>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="grid-content bg-purple-light">
                        <div class="bbody">{{detForm.payTime}}</div>
                    </div>
                </el-col>
                <el-col :span="4">
                    <div class="grid-content bg-purple">
                        <div class="bhead">{{$t('remitsta')}}</div>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="grid-content bg-purple-light">
                        <div class="bbody">{{payStats}}</div>
                    </div>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="4">
                    <div class="grid-content bg-purple">
                        <div class="bhead">{{$t('chnmerchntno')}}</div>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="grid-content bg-purple-light">
                        <div class="bbody">{{detForm.channelMerId}}</div>
                    </div>
                </el-col>
                <el-col :span="4">
                    <div class="grid-content bg-purple">
                        <div class="bhead">{{$t('sedchnodrno')}}</div>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="grid-content bg-purple-light">
                        <div class="bbody">{{detForm.sendChannelOrderNo}}</div>
                    </div>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="4">
                    <div class="grid-content bg-purple">
                        <div class="bhead">{{$t('chnnumber')}}</div>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="grid-content bg-purple-light">
                        <div class="bbody">{{detForm.channelCode}}</div>
                    </div>
                </el-col>
                <el-col :span="4">
                    <div class="grid-content bg-purple">
                        <div class="bhead">{{$t('globalser')}}</div>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="grid-content bg-purple-light">
                        <div class="bbody">{{detForm.globalSeq}}</div>
                    </div>
                </el-col>
            </el-row>
        </div>
        <div class="detBox">
            <el-row>
                <el-col :span="4">
                    <div class="grid-content bg-purple">
                        <div class="bhead">{{$t('batchNo')}}</div>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="grid-content bg-purple-light">
                        <div class="bbody">{{detForm.settleBatchNo}}</div>
                    </div>
                </el-col>
                <el-col :span="4">
                    <div class="grid-content bg-purple">
                        <div class="bhead">{{$t('trastamt')}}</div>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="grid-content bg-purple-light">
                        <div class="bbody">{{detForm.amt}}</div>
                    </div>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="4">
                    <div class="grid-content bg-purple">
                        <div class="bhead">{{$t('creatime')}}</div>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="grid-content bg-purple-light">
                        <div class="bbody">{{detForm.sysGmtCreate}}</div>
                    </div>
                </el-col>
                <el-col :span="4">
                    <div class="grid-content bg-purple">
                        <div class="bhead">{{$t('expsionpar')}}</div>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="grid-content bg-purple-light">
                        <div class="bbody">{{detForm.extInfo}}</div>
                    </div>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="4">
                    <div class="grid-content bg-purple">
                        <div class="bhead">{{$t('payrid')}}</div>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="grid-content bg-purple-light">
                        <div class="bbody">{{detForm.payerUserId}}</div>
                    </div>
                </el-col>
                <el-col :span="4">
                    <div class="grid-content bg-purple">
                        <div class="bhead">{{$t('payertyp')}}</div>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="grid-content bg-purple-light">
                        <div class="bbody">{{detForm.payerUserType}}</div>
                    </div>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="4">
                    <div class="grid-content bg-purple">
                        <div class="bhead">{{$t('payeid')}}</div>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="grid-content bg-purple-light">
                        <div class="bbody">{{detForm.payeeUserId}}</div>
                    </div>
                </el-col>
                <el-col :span="4">
                    <div class="grid-content bg-purple">
                        <div class="bhead">{{$t('payeetpe')}}</div>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="grid-content bg-purple-light">
                        <div class="bbody">{{detForm.payeeUserType}}</div>
                    </div>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script>
import {
    monrecdetail
} from '@/libs/reqlist.js'
export default {
    data () {
        return {
            transId: '',
            payStats: '',
            detForm: {}
        }
    },
    methods: {
        getRecRet () {
            monrecdetail(JSON.stringify({ transId: this.transId })).then(res => {
                if (res.data.code === '000000') {
                    if (res.data.data.productCode === 'SCAN_PAY_CODE') res.data.data.productCode = this.$t('paymentbypaymentcode')
                    if (res.data.data.productCode === 'SCAN_REC_CODE') res.data.data.productCode = this.$t('paybycollectioncode')
                    if (res.data.data.productCode === 'SDK_CONSUME') res.data.data.productCode = this.$t('sdkconsump')
                    if (res.data.data.productCode === 'PLAT_CONSUME') res.data.data.productCode = this.$t('platformcon')
                    if (res.data.data.productCode === 'SETTLE_PAY') res.data.data.productCode = this.$t('settmoney')
                    if (res.data.data.transType === 'SCAN_PAY_CODE') res.data.data.transType = this.$t('paymentbypaymentcode')
                    if (res.data.data.transType === 'SCAN_REC_CODE') res.data.data.transType = this.$t('paybycollectioncode')
                    if (res.data.data.transType === 'SDK_CONSUME') res.data.data.transType = this.$t('sdkconsump')
                    if (res.data.data.transType === 'PLAT_CONSUME') res.data.data.transType = this.$t('platformcon')
                    if (res.data.data.transType === 'SETTLE_PAY') res.data.data.transType = this.$t('settmoney')
                    if (res.data.data.payType === 'AUTO') res.data.data.payType = this.$t('automaticmon')
                    if (res.data.data.payType === 'MANUAL') res.data.data.payType = this.$t('manlpaymentsett')
                    if (res.data.data.payType === 'WITHDRAW') res.data.data.payType = this.$t('selfhelpwith')
                    if (res.data.data.payerUserType === 'PSN') res.data.data.payerUserType = this.$t('personal')
                    if (res.data.data.payerUserType === 'MER') res.data.data.payerUserType = this.$t('merchant')
                    if (res.data.data.payeeUserType === 'PSN') res.data.data.payeeUserType = this.$t('personal')
                    if (res.data.data.payeeUserType === 'MER') res.data.data.payeeUserType = this.$t('merchant')
                    if (res.data.data.extInfo) res.data.data.extInfo = res.data.data.extInfo.split('"')[3]
                    this.detForm = res.data.data
                }
            })
        },
        goAway () {
            this.$router.go(-1)
        }
    },
    mounted () {
        this.transId = window.sessionStorage.getItem('handlePayNo')
        let state = JSON.parse(window.sessionStorage.getItem('handleSta'))
        switch (state) {
            case 1:
                this.payStats = this.$t('succ')
                break
            case 2:
                this.payStats = this.$t('failed')
                break
            case 3:
                this.payStats = this.$t('inprogress')
                break
            case '':
                this.payStats = this.$t('channelproces')
        }
        this.getRecRet()
    },
    destroyed () {
        window.sessionStorage.removeItem('handlePayNo')
        window.sessionStorage.removeItem('handleSta')
    }
}
</script>

<style lang="less" scoped>
.box {
    position: relative;
    width: 800px;
    margin: 0 auto;
    .title {
        display: inline-block;
        margin-top: 20px;
        font-size: 18px;
        font-weight: 700;
    }
    .el-row {
        border-bottom: 1px solid #ccc;
    }
    .el-row:last-child {
        border-bottom: none;
    }
    .detBox {
        margin-top: 26px;
        margin-bottom: 20px;
        border: 1px solid #ccc;
        .bhead {
            background: #E4E4E4;
            width: 133px;
            height: 40px;
            line-height: 40px;
            font-size: 12px;
            text-align: center;
            border-right: 1px solid #ccc;
        }
        .bbody {
            background: #fff;
            width: 267px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            border-right: 1px solid #ccc;
        }
        .dadada {
            width: 665px;
        }
    }
    .el-button {
        position: absolute;
        top: 20px;
        right: 0;
    }
}
</style>
